import React, {useState, useEffect, FC} from 'react'
import { Modal, Form, Input, DatePicker, Switch } from 'antd';
import {ISingleUser, IFormProps} from '../../../models/data'
import moment from 'moment'


interface IUserModalProps {
    isModalVisible: boolean
    record: ISingleUser | undefined
    handleClose: () => void
    onFinish: (values: IFormProps) => void
}

const UserModal: FC<IUserModalProps>= (props) => {
    console.log('props', props);
    const [form] = Form.useForm();
  
    const onFinishFailed = (errorInfo: any) => {
        console.log('Failed:', errorInfo);
    };

    useEffect(() => {
        if (props.record) {
            form.setFieldsValue({
                ...props.record,
                create_time: moment(props.record.create_time),
                status: props.record.status === 1 ? true : false
            });
        }else {
            form.resetFields()
        }
        
        return () => {
        };
    }, [props.isModalVisible]);

    const handleOk = () => {
        form.submit()
    }

    const layout = {
        labelCol: { span: 6 },
        wrapperCol: { span: 18 },
      };
    return (
        <div>
            <Modal 
            title={props.record ? '修改' + props.record?.id : '添加'}
            visible={props.isModalVisible}
            onOk={handleOk}
            onCancel={props.handleClose}
            forceRender
            >
                <Form
                    {...layout}
                    name="basic"
                    onFinish={props.onFinish}
                    onFinishFailed={onFinishFailed}
                    form={form}
                    initialValues={{
                        status: true
                    }}
                    >
                    <Form.Item
                        label="Name"
                        name="name"
                        rules={[{ required: true, message: 'Please input your name!' }]}
                    >
                        <Input />
                    </Form.Item>

                    <Form.Item
                        label="Email"
                        name="email"
                        rules={[{ required: true, message: 'Please input your email!' }]}
                    >
                        <Input />
                    </Form.Item>
                    <Form.Item
                        label="Create Time"
                        name="create_time"
                    >
                        <DatePicker showTime />
                    </Form.Item>
                    <Form.Item
                        label="Status"
                        name="status"
                        valuePropName="checked"
                    >
                        <Switch />
                    </Form.Item>
                </Form>
            </Modal>
        </div>
    )
}
export default  UserModal